<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>WebTools-Web开发者素材</title>
    <meta name="keywords" content="vue,react,组件，插件,模板，echarts,数据可视化,微前端,后台管理系统,免费下载">
    <meta name="description" content="提供vue/react/组件,插件,echarts数据可视化、后台管理系统模板免费下载,微前端解决方案">
    <link rel="icon" href="../../img/logo.png">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <linK rel="stylesheet" href="../../js/layui/css/layui.css">
    <link rel="stylesheet" href="js/numbergd/globle.css">
    <link rel="stylesheet" href="js/clusterer/clusterer.css"/>  <!--聚合地图样式-->
    <link rel="stylesheet" href="css/show.css">
</head>
<body>
<div class="header">
    <li class="left"></li>
    <li class="right"></li>
    <li class="center"></li>
    <li class="date">2018-01-01 18:00:00</li>
</div>
<div class="main">
    <div class="layout-left">
        <div class="item">
            <div class="left-1 corner">
                <li class="title">车辆统计</li>
                <div class="carCount">
                    <div class="labelLeft">
                        <ul>
                            <li class="sb"></li>
                            <li class="carTotal">车辆总数(辆)</li>
                            <li class="carTotalAmount">1,234,567</li>
                        </ul>
                        <ul>
                            <li class="sb"></li>
                            <li class="carTotal">车辆在线(辆)</li>
                            <li class="carTotalAmount">1,234,567</li>
                        </ul>
                    </div>
                    <div class="chartsRight" id="test5"></div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="left-2 corner">
                <li class="title">流量统计</li>
                <div class="flowCount">
                    <div class="labelRight">
                        <ul>
                            <li class="today"></li>
                            <li class="legend">今日定位数量(条)</li></li>
                            <li class="amount">123,456</li>
                        </ul>
                        <ul>
                            <li class="month"></li>
                            <li class="legend">本月累计定位数量(条)</li>
                            <li class="amount">123,456,789</li>
                        </ul>

                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="left-3 corner">
                <li class="title">上线率/在线率</li>
                <div class="line-off-on-wrap">
                    <div class="line-off-on">
                        <li class="online">56%</li>
                        <li class="offline">68%</li>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="layout-right">
        <div class="item" style="height: 66.6%;overflow: hidden;">
            <div class="right-1 corner">
                <li class="title">单位终端类型统计</li>
                <div class="right-1-wrap">
                    <div class="organization">
                        <li class="organization-name">中山市城市行政管理执法局<span>(1200)</span></li>
                        <ul class="equipment">
                            <ul>
                                <li class="equipment-progress _0048eb"></li>
                                <li class="equipment-amount">0/200</li>
                            </ul>
                            <li class="equipment-name">北斗手持终端</li>
                        </ul>
                        <ul class="equipment">
                            <ul>
                                <li class="equipment-progress _16ceb4"></li>
                                <li class="equipment-amount">0/200</li>
                            </ul>
                            <li class="equipment-name">北斗手持终端</li>
                        </ul>
                        <ul class="equipment">
                            <ul>
                                <li class="equipment-progress f77a7a"></li>
                                <li class="equipment-amount">0/200</li>
                            </ul>
                            <li class="equipment-name">北斗手持终端</li>
                        </ul>
                        <ul class="equipment">
                            <ul>
                                <li class="equipment-progress _17adef"></li>
                                <li class="equipment-amount">0/200</li>
                            </ul>
                            <li class="equipment-name">北斗手持终端</li>
                        </ul>
                        <ul class="equipment">
                            <ul>
                                <li class="equipment-progress f5c847"></li>
                                <li class="equipment-amount">0/200</li>
                            </ul>
                            <li class="equipment-name">北斗手持终端</li>
                        </ul>
                        <ul class="equipment">
                            <ul>
                                <li class="equipment-progress af89d6"></li>
                                <li class="equipment-amount">0/200</li>
                            </ul>
                            <li class="equipment-name">北斗手持终端</li>
                        </ul>
                    </div>
                    <div class="organization">
                        <li class="organization-name">中山市城市行政管理执法局<span>(1200)</span></li>
                        <ul class="equipment">
                            <ul>
                                <li class="equipment-progress _0048eb"></li>
                                <li class="equipment-amount">0/200</li>
                            </ul>
                            <li class="equipment-name">北斗手持终端</li>
                        </ul>
                        <ul class="equipment">
                            <ul>
                                <li class="equipment-progress _16ceb4"></li>
                                <li class="equipment-amount">0/200</li>
                            </ul>
                            <li class="equipment-name">北斗手持终端</li>
                        </ul>
                        <ul class="equipment">
                            <ul>
                                <li class="equipment-progress f77a7a"></li>
                                <li class="equipment-amount">0/200</li>
                            </ul>
                            <li class="equipment-name">北斗手持终端</li>
                        </ul>
                        <ul class="equipment">
                            <ul>
                                <li class="equipment-progress _17adef"></li>
                                <li class="equipment-amount">0/200</li>
                            </ul>
                            <li class="equipment-name">北斗手持终端</li>
                        </ul>
                        <ul class="equipment">
                            <ul>
                                <li class="equipment-progress f5c847"></li>
                                <li class="equipment-amount">0/200</li>
                            </ul>
                            <li class="equipment-name">北斗手持终端</li>
                        </ul>
                        <ul class="equipment">
                            <ul>
                                <li class="equipment-progress af89d6"></li>
                                <li class="equipment-amount">0/200</li>
                            </ul>
                            <li class="equipment-name">北斗手持终端</li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
        <div class="item">
            <div class="right-2 corner">
                <li class="title">类型统计</li>
                <div class="typeCount" id="test3"></div>
            </div>
        </div>
    </div>
    <div class="layout-center">
        <div class="item" style="height: 66.6%;position: relative;overflow: hidden">
            <div class="center-1" id="container"></div>
        </div>
        <div class="item">
            <div class="center-2 corner">
                <li class="title">各终端在线率</li>
                <div class="terminalOnline" id="test2"></div>
            </div>
        </div>
    </div>
</div>
<script src="../../js/jquery.min.js"></script>
<script>
    $('.layout-left,.layout-right,.layout-center').css({'height':$(window).height()-58,'min-height':'520px'});
    $(window).resize(function () {
        $('.layout-left,.layout-right,.layout-center').css({'height':$(window).height()-58,'min-height':'520px'});
    });
    $(function () {
        var arr=[100,130,240,200,260,60,45,240,60,100,260,80];
        $('.equipment-progress').each(function (m,n) {
            $('.equipment-progress').eq(m).animate({
                'width':arr[m]
            },600,'linear')
        })
    })

</script>

<script src="../../js/echarts/echarts.min.js"></script>
<script src="js/main.js"></script>

<script src="js/numbergd/num_1.js"></script>
<script src="js/numbergd/num_2.js"></script>
<script>
    function data_example0(){
        $("#dataNums1").rollNum({
            deVal:0
        });
        $("#dataNums2").rollNum({
            deVal:0
        });
    }
    function data_example1(){
        $("#dataNums1").rollNum({
            deVal:12345
            ,digit: 5
        });
        $("#dataNums2").rollNum({
            deVal:12345
            ,digit: 5
        });
    }
    function data_example2(){
        $("#dataNums1").rollNum({
            deVal:555555555
            ,digit: 9

        });
        $("#dataNums2").rollNum({
            deVal:888888888
            ,digit: 9
        });
    }
    data_example0();
    // setTimeout(data_example1,8000);
    setTimeout(data_example2,8000)
</script>

<script src="http://webapi.amap.com/maps?v=1.4.6&key=d86f44f58592518cbcd2a4e4c3b7e662&plugin=AMap.MarkerClusterer"></script> <!--聚合地图key-->
<script type="text/javascript" src="js/clusterer/addToolbar.js"></script>    <!--基础控件-->
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>        <!--ui控件库-->
<script src="http://a.amap.com/jsapi_demos/static/china.js"></script>    <!--中国地图-->
<script src="js/clusterer/clusterer.js"></script>


</body>
</html>